<template>
  <div class="container">
		<div class="header">
			<i class="ri-arrow-left-s-line"@click="toPersonal"></i>
			<span @click="toPersonal">收货地址</span>
		</div>
		<div class="address-item">
			<div class='name'>尹庆为</div>
			<span class="moren">默认</span>
			<span class="address">北京市昌平区北七家镇宏福苑小区xxx楼xxx单元xxx</span>
			<div class="modify">
				<i class="ri-draft-line"></i>
			</div>

		</div>
		<div class="address-item">
			<div class='name'>张三</div>
			<span class="address">张三市张三区张三镇张三小区</span>
			<div class="modify">
				<i class="ri-draft-line"></i>
			</div>
		</div>
		<div class="address-item">
			<div class='name'>李四</div>
			<span class="address">张三市张三区张三镇张三小区</span>
			<div class="modify">
				<i class="ri-draft-line"></i>
			</div>
		</div>
		<div class="button">
			<button>+添加地址</button>
		</div>
	</div>
</template>

<script>
  export default {
    name:'Address',
    methods:{
        //点击返回箭头  跳转到个人中心
      toPersonal() {
        this.$router.push({
          name: "personal",
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  * {
		margin: 0;
		padding: 0;
	}

	.container {
		position: relative;
	}

	.header {
		font-size: 40px;
		height: 100px;
		line-height: 100px;
        background-color: #9F8052
	}

	.address-item {
		font-size: 30px;
		height: 250px;
		padding: 40px;
		border-bottom: 1px solid #b6b0b0;
		box-shadow: 0px 5px 10px #9F8052;
	}

	.address-item .name {
		font-size: 45px;
		margin-bottom: 15px;
	}

	.address-item .moren {
		width: 80px;
		display: block;
		display: flex;
		border: 1px solid #d81d1d;
	}

	.address-item .address {
		display: inline-block;
		width: 750px;
		margin: 0;
	}

	.address-item .modify {
		float: right;
		font-size: 45px;
		width: 80px;
	}

	.container .button {
		position: absolute;
		left: 0;
		bottom: -620px;
		width: 100%;
		font-size: 28px;
		color: #606266;
		text-align: center;
	}
	.button button{
		width: 800px;
		height: 80px;
		font-size: 40px;
        background-color: #9F8052
	}
</style>